<template>
  <div class="viewContain">
    <div style="text-align:right">
      <el-button size="mini" type="primary" @click="handleEdit">修改</el-button>
      <el-button size="mini" type="danger" @click="handleDelete">删除</el-button>
    </div>
    <el-row>
      <el-col :xs="{ span: 24 }" :sm="{ span: 8 }" :md="{ span: 8 }" :xl="{ span: 8 }">
        <el-tree :data="dataTree" default-expand-all :props="defaultProps" class="tree" @node-click="handleNodeClick" />
      </el-col>
      <el-col :xs="{ span: 24 }" :sm="{ span: 8 }" :md="{ span: 10 }" :xl="{ span: 10 }">
        <el-form :model="formData" size="small" label-width="150px">
          <el-form-item label="功能名称 :">
            <el-input v-model="formData.name" clearable style="width:100%" />
          </el-form-item>
          <el-form-item label="功能序号 :">
            <el-input v-model="formData.name" clearable style="width:100%" />
          </el-form-item>
          <el-form-item label="功能URL :">
            <el-input v-model="formData.name" clearable style="width:100%" />
          </el-form-item>
          <el-form-item label="功能方法 :">
            <el-radio-group v-model="radio">
              <el-radio :label="1">get</el-radio>
              <el-radio :label="2">post</el-radio>
              <el-radio :label="3">delete</el-radio>
              <el-radio :label="4">put</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否可用 :">
            <el-radio-group v-model="radio1">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否是菜单 :">
            <el-radio-group v-model="radio2">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="资源是否受限 :">
            <el-radio-group v-model="radio3">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataTree: [
        {
          label: '服务平台功能菜单',
          children: [
            {
              label: '社保卡申领审核子系统',
              children: []
            },
            {
              label: '政务公开子系统',
              children: []
            },
            {
              label: '核心管理子系统',
              children: [
                {
                  label: '区域管理',
                  children: []
                },
                {
                  label: '机构管理',
                  children: []
                }
              ]
            },
            {
              label: '设备管理子系统',
              children: [
                {
                  label: '基本管理',
                  children: []
                },
                {
                  label: '远程管理',
                  children: []
                }
              ]
            },
            {
              label: '版本管理子系统',
              children: [
                {
                  label: '软件版本',
                  children: []
                },
                {
                  label: '版本更新',
                  children: []
                }
              ]
            },
            {
              label: '电商管理子系统',
              children: [
                {
                  label: '商品管理',
                  children: []
                },
                {
                  label: '订单管理',
                  children: []
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      formData: {},
      radio: 1, // 功能方法
      radio1: 1, // 是否可用
      radio2: 1, // 是否是菜单
      radio3: 1 // 资源是否受限
    }
  },
  methods: {
    handleNodeClick(data) {
      console.log(data)
    },
    // 修改
    handleEdit() {},
    // 删除
    handleDelete() {}
  }
}
</script>
<style lang="scss" scoped>
.tree {
  width: 300px;
  height: 600px;
  border: 1px solid #ccc;
  overflow: auto;
}
</style>
